<template>
<transition name="confirm">
    <div class="confirm-box" v-show="show">
        <div class="confirm">   
            <div class="msg">{{msg}}</div>
            <div class="btns">
                <button v-if="showCancel" @click="$emit('cancel')">取消</button>
                <button @click="$emit('confirm')">确认</button>
            </div>
        </div>
    </div>
</transition>
</template>
<style lang="sass">
// 移动端1像素的细线怎么实现 
//     伪元素
//     宽度两倍
//     border：1像素
// 组件命名用双驼峰,组件文件名最好是多个单词
.confirm-box 
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: rgba(0,0,0,.8)
    display: flex
    justify-content: center
    align-items: center
    .confirm
        width: 60%
        min-height: 50px
        background: #fff
        border-radius: 5px
    .btns
        position: relative
        display: flex
        height: 30px
        &:after
            content: ""
            position: absolute
            top: 0
            left: 0
            width: 200%  
            border-top: 1px solid #ccc
            transform-origin: 0 0 
            transform: scale(0.5)
    button
        flex-grow: 1
        background: transparent
        &:after
            content: ""
            position: absolute
            top: 0
            left: 0
            width: 200%  
            border-left: 1px solid #ccc
            transform-origin: 0 0 
            transform: scale(0.5)
    .msg
        padding: 10px

.confirm-enter
    opacity: 0
    .confirm
        transform: scale(.5)
.confirm-enter-active
    transition: .6s
    .confirm
        transition: .6s
.confirm-leave-to
    opacity: 0
.confirm-leave-active
    transition: .3s
</style>
<script>
export default {
    props:{
        show:{
            type:Boolean,
            default:false
        },
        msg:{
            type:String,
            required:true
        },
        //取消按钮 是否显示
        showCancel:{
            type:Boolean,
            default:true
        }
    }
}
</script>